<template>
	<cl-crud ref="Crud">
		<cl-row>
			<!-- 刷新按钮 -->
			<cl-refresh-btn />
			<!-- 新增按钮 -->
			<cl-add-btn />
			<!-- 删除按钮 -->
			<cl-multi-delete-btn />
			<cl-flex1 />
			<!-- 条件搜索 -->
			<cl-search ref="Search" />
		</cl-row>

		<cl-row>
			<!-- 数据表格 -->
			<cl-table ref="Table" />
		</cl-row>

		<cl-row>
			<cl-flex1 />
			<!-- 分页控件 -->
			<cl-pagination />
		</cl-row>

		<!-- 新增、编辑 -->
		<cl-upsert ref="Upsert" />
	</cl-crud>
</template>

<script lang="ts" setup>
defineOptions({
	name: 'userProfile-profile'
});

import { useCrud, useTable, useUpsert, useSearch } from '@cool-vue/crud';
import { useCool } from '/@/cool';
import { useI18n } from 'vue-i18n';
import { reactive } from 'vue';
import UserSelect from '/$/user/components/user-select.vue';

const { service } = useCool();
const { t } = useI18n();

// 选项
const options = reactive({
	gender: [
		{ label: t('未知'), value: 0 },
		{ label: t('男'), value: 1 },
		{ label: t('女'), value: 2 }
	],
	myopiaCondition: [
		{ label: t('正常视力'), value: '正常视力' },
		{ label: t('低度近视(-0.50~-3.00D)'), value: '低度近视(-0.50~-3.00D)' },
		{ label: t('中度近视(-3.00~-6.00D)'), value: '中度近视(-3.00~-6.00D)' },
		{ label: t('高度近视(>-6.00D)'), value: '高度近视(>-6.00D)' }
	],
	visualFunction: [
		{ label: t('正常'), value: '正常' },
		{ label: t('调节不足'), value: '调节不足' },
		{ label: t('调节过度'), value: '调节过度' },
		{ label: t('融合功能弱'), value: '融合功能弱' },
		{ label: t('立体视觉缺陷'), value: '立体视觉缺陷' },
		{ label: t('斜视/弱视'), value: '斜视/弱视' }
	],
	astigmatism: [
		{ label: t('无散光'), value: '无散光' },
		{ label: t('轻度(<0.75D)'), value: '轻度(<0.75D)' },
		{ label: t('中度(0.75-1.50D)'), value: '中度(0.75-1.50D)' },
		{ label: t('重度(>1.50D)'), value: '重度(>1.50D)' }
	],
	myopiaRisk: [
		{ label: t('低风险'), value: '低风险' },
		{ label: t('中风险'), value: '中风险' },
		{ label: t('高风险'), value: '高风险' }
	],
	myopiaRiskReason: [
		{ label: t('家族遗传'), value: '家族遗传' },
		{ label: t('长时间用眼'), value: '长时间用眼' },
		{ label: t('户外活动不足'), value: '户外活动不足' },
		{ label: t('用眼姿势差'), value: '用眼姿势差' },
		{ label: t('电子屏幕过度'), value: '电子屏幕过度' },
		{ label: t('视功能异常'), value: '视功能异常' },
		{ label: t('营养/睡眠不足'), value: '营养/睡眠不足' }
	],
	customerNeeds: [
		{ label: t('视力矫正(配镜)'), value: '视力矫正(配镜)' },
		{ label: t('近视控制'), value: '近视控制' },
		{ label: t('视功能训练'), value: '视功能训练' },
		{ label: t('角膜塑形'), value: '角膜塑形' },
		{ label: t('药物干预'), value: '药物干预' },
		{ label: t('不后续复查'), value: '不后续复查' },
		{ label: t('科普咨询'), value: '科普咨询' }
	],
	customerAwareness: [
		{ label: t('了解近视危害'), value: '了解近视危害' },
		{ label: t('了解近视控制方法'), value: '了解近视控制方法' },
		{ label: t('了解角膜塑形'), value: '了解角膜塑形' },
		{ label: t('了解低浓度阿托品'), value: '了解低浓度阿托品' },
		{ label: t('了解视功能训练'), value: '了解视功能训练' },
		{ label: t('关注安全性'), value: '关注安全性' },
		{ label: t('关注性价比'), value: '关注性价比' }
	],
	dealIntention: [
		{ label: t('高(1个月内)'), value: '高(1个月内)' },
		{ label: t('中(3个月内)'), value: '中(3个月内)' },
		{ label: t('低(6个月内)'), value: '低(6个月内)' },
		{ label: t('暂无计划'), value: '暂无计划' },
		{ label: t('仅咨询'), value: '仅咨询' }
	],
	lifeHabits: [
		{ label: t('户外≥2h/天'), value: '户外≥2h/天' },
		{ label: t('每日电子屏幕≤2h'), value: '每日电子屏幕≤2h' },
		{ label: t('用眼休息规律'), value: '用眼休息规律' }
	],
	interventionHistory: [
		{ label: t('曾戴OK镜'), value: '曾戴OK镜' },
		{ label: t('曾用阿托品'), value: '曾用阿托品' },
		{ label: t('视功能训练中'), value: '视功能训练中' },
		{ label: t('无任何干预'), value: '无任何干预' }
	],
	decisionMaker: [
		{ label: t('学生本人'), value: '学生本人' },
		{ label: t('家长决策'), value: '家长决策' },
		{ label: t('医生推荐'), value: '医生推荐' }
	],
	competitorUsage: [
		{ label: t('正在用他牌OK镜'), value: '正在用他牌OK镜' },
		{ label: t('其他近视控制产品'), value: '其他近视控制产品' },
		{ label: t('未使用任何产品'), value: '未使用任何产品' }
	]
});

// cl-upsert
const Upsert = useUpsert({
	items: [
		{
			label: t('近视情况'),
			prop: 'myopiaCondition',
			component: {
				name: 'el-select',
				props: {
					multiple: true,
					clearable: true,
					options: options.myopiaCondition
				}
			},
			span: 12
		},
		{
			label: t('视功能情况'),
			prop: 'visualFunction',
			component: {
				name: 'el-select',
				props: {
					multiple: true,
					clearable: true,
					options: options.visualFunction
				}
			},
			span: 12
		},
		{
			label: t('散光情况'),
			prop: 'astigmatism',
			component: {
				name: 'el-select',
				props: {
					multiple: true,
					clearable: true,
					options: options.astigmatism
				}
			},
			span: 12
		},
		{
			label: t('初步近视风险评估'),
			prop: 'myopiaRisk',
			component: {
				name: 'el-select',
				props: {
					multiple: true,
					clearable: true,
					options: options.myopiaRisk
				}
			},
			span: 12
		},
		{
			label: t('初步近视风险原因'),
			prop: 'myopiaRiskReason',
			component: {
				name: 'el-select',
				props: {
					multiple: true,
					clearable: true,
					options: options.myopiaRiskReason
				}
			},
			span: 12
		},
		{
			label: t('用户需求'),
			prop: 'customerNeeds',
			component: {
				name: 'el-select',
				props: {
					multiple: true,
					clearable: true,
					options: options.customerNeeds
				}
			},
			span: 12
		},
		{
			label: t('用户认知'),
			prop: 'customerAwareness',
			component: {
				name: 'el-select',
				props: {
					multiple: true,
					clearable: true,
					options: options.customerAwareness
				}
			},
			span: 12
		},
		{
			label: t('前期成交意向'),
			prop: 'dealIntention',
			component: {
				name: 'el-select',
				props: {
					multiple: true,
					clearable: true,
					options: options.dealIntention
				}
			},
			span: 12
		},
		{
			label: t('生活习惯'),
			prop: 'lifeHabits',
			component: {
				name: 'el-select',
				props: {
					multiple: true,
					clearable: true,
					options: options.lifeHabits
				}
			},
			span: 12
		},
		{
			label: t('既往干预史'),
			prop: 'interventionHistory',
			component: {
				name: 'el-select',
				props: {
					multiple: true,
					clearable: true,
					options: options.interventionHistory
				}
			},
			span: 12
		},
		{
			label: t('决策者身份'),
			prop: 'decisionMaker',
			component: {
				name: 'el-select',
				props: {
					multiple: true,
					clearable: true,
					options: options.decisionMaker
				}
			},
			span: 12
		},
		{
			label: t('竞争品牌使用'),
			prop: 'competitorUsage',
			component: {
				name: 'el-select',
				props: {
					multiple: true,
					clearable: true,
					options: options.competitorUsage
				}
			},
			span: 12
		}
	]
});

// cl-table
const Table = useTable({
	columns: [
		{ type: 'selection' },
		{ label: t('昵称'), prop: 'userName', minWidth: 140 },
		{ label: t('姓名'), prop: 'name', minWidth: 140 },
		{
			label: t('性别'),
			prop: 'gender',
			minWidth: 120,
			dict: options.gender
		},
		{
			label: t('出生日期'),
			prop: 'birthDate',
			minWidth: 140,
			sortable: 'custom',
			component: {
				name: 'cl-date-text',
				props: { format: 'YYYY-MM-DD' }
			}
		},
		{ label: t('联系方式'), prop: 'contact', minWidth: 140 },
		{ label: t('近视情况'), prop: 'myopiaCondition', minWidth: 140 },
		{ label: t('视功能情况'), prop: 'visualFunction', minWidth: 140 },
		{ label: t('散光情况'), prop: 'astigmatism', minWidth: 140 },
		{ label: t('初步近视风险评估'), prop: 'myopiaRisk', minWidth: 140 },
		{ label: t('初步近视风险原因'), prop: 'myopiaRiskReason', minWidth: 140 },
		{ label: t('用户需求'), prop: 'customerNeeds', minWidth: 140 },
		{ label: t('用户认知'), prop: 'customerAwareness', minWidth: 140 },
		{ label: t('前期成交意向'), prop: 'dealIntention', minWidth: 140 },
		{ label: t('生活习惯'), prop: 'lifeHabits', minWidth: 140 },
		{ label: t('既往干预史'), prop: 'interventionHistory', minWidth: 140 },
		{ label: t('决策者身份'), prop: 'decisionMaker', minWidth: 140 },
		{ label: t('竞争品牌使用'), prop: 'competitorUsage', minWidth: 140 },
		{
			label: t('创建时间'),
			prop: 'createTime',
			minWidth: 170,
			sortable: 'desc',
			component: { name: 'cl-date-text' }
		},
		{
			label: t('更新时间'),
			prop: 'updateTime',
			minWidth: 170,
			sortable: 'custom',
			component: { name: 'cl-date-text' }
		},
		{ type: 'op', buttons: ['edit', 'delete'] }
	]
});

// cl-search
const Search = useSearch();

// cl-crud
const Crud = useCrud(
	{
		service: service.userProfile.profile
	},
	app => {
		app.refresh();
	}
);

// 刷新
function refresh(params?: any) {
	Crud.value?.refresh(params);
}
</script>
